<template>
  <div class="doneProcess">
    <el-card>
      <el-table :data="doneProcessList">
        <el-table-column
          :show-overflow-tooltip="true"
          label="流程名称"
          prop="name"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          label="时间"
          prop="createTime"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
       <template slot-scope="scope">
          <el-button  type="text" @click="processDetail(scope.row)">流程详情</el-button>
         </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.pageNum"
        :page-sizes="[5, 10, 15, 30]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
        :pagerCount="5"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      doneProcessList: [],
      pageData: {
        total: 0,
        pageSize: 5,
        pageNum: 1,
      },
    }
  },

  methods: {
    doneProcessFn () {
      let params = {
        size: this.pageData.pageSize,
        page: this.pageData.pageNum,
      }
      this.$http
        .get('/api/flow/core/my-process', { params: params })
        .then((response) => {
          this.doneProcessList = response.data.result.list
          this.pageData.total = response.data.result.total
        })
    },
    // 流程详情
    processDetail (row) {
      let json = {
        formId: row.formId,
        processInstanceId: row.processInstanceId,
        processDefinitionId: row.processDeployId,
        type: '流程详情'
      }
      this.$emit('listenClickDetail',json)
    },
    // 分页
    handleSizeChange (val) {
      this.pageData.pageSize = val
      this.doneProcessFn()
    },
    handleCurrentChange (val) {
      this.pageData.pageNum = val
      this.doneProcessFn()
    },
  },
}
</script>
<style lang="less" scoped>
  @import "../../admin/styles/formStyle.less";
  .el-pagination {
    width: 100%;
    margin-top: 30px;
    white-space: normal !important
 }
el-card{
  margin-bottom: 100px;
}
 ::v-deep .el-pagination__total{
   margin: 0px;
 }
 ::v-deep .el-pagination__jump{
   margin: 0px;
 }
 ::v-deep .el-table__fixed-right::before{
  height: 0px;
}
</style>
